<style type="text/css">
    .page-header .left {
        width: calc(100% - 220px);
    }

    @media only screen and (max-width: 479px) and (min-width: 320px) {
        .page-header .left {
            width: 100%;
        }
    }
</style>
<div id="content">
    <div class="row s_page_title">
        <sa-big-breadcrumbs [items]="['运维管理[环卫]','离线明细']" icon="fa fa-newspaper-o" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
    </div>
    <sa-widgets-grid>
        <div class="s_table">
            <div sa-widget [editbutton]="false" color="darken" class="clearfix">
                <header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
                    <h2>离线明细</h2>
                </header>
                <div>
                    <div class="widget-body no-padding">
                        <div class="page-header clearfix s_table_opreation">
                            <div class="left page-header-btn">
                                <sa-company-tree-car companyTreeId="searchcompanyTree" tcarNumberSelect2="searchCarNumberSelect2" wrapId="content" [isShowCarSort]="false" [isShowCarNum]="true" (companySelected)="searchCompanySelected($event)" sourceCarUrl="carInfo/queryCarNumber.html" typeFlag="1"></sa-company-tree-car>
                                <!-- <div class="top_module" style="min-width: 140px;border: 1px solid #ccc;border-radius: 4px;overflow: hidden;">
									<span class="module_text" style="display: inline-block;width: 62px;vertical-align: top;border-radius: 0;">设备ID</span>
									<input class="form-control" [(ngModel)]='deviceId'  type="text" disabled onfocus="this.blur()" placeholder="" style="border:none;display: inline-block;width:148px;height: 26px;"/>
								</div> -->
                                <div class="top_module">
                                    <span class="module_text">离线时长</span>
                                    <select class="module_inp" name="dateType" id="dateType" [(ngModel)]="dateType">
                                        <option value="">全部</option>
                                        <option value="2">当天离线</option>
                                        <option value="4">1-3天</option>
                                        <option value="5">3-5天</option>
                                        <option value="6">5-7天</option>
                                        <option value="7">7天以上</option>
                                    </select>
                                </div>
                                <div class="top_module">
									<table-select-date [notInit]='true' [specifyId]='specifyId' [specifyTime]='specifyTime' (outerTime)="offlineSelectTime($event)" ></table-select-date>
								</div>
                                <button class="btn btn-primary" (click)="table_search()">查询</button>
                                <button class="btn btn-primary" type="button" (click)="exportData()">导出</button>
                            </div>
                            <!-- <div class="right top-search">
                                <input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input" placeholder="设备ID、车牌号、录入人员...">
                                <span class="top-search-box">
                                    <button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
                                </span>
                            </div> -->
                        </div>
                        <div class="table_scroll">
                            <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                                <thead>
                                    <tr>
                                        <th>所属公司</th>
                                        <th>车牌号</th>
                                        <th>设备号</th>
                                        <th>车辆分类</th>
                                        <th>离线时间</th>
                                        <th>离线时长
                                            <span class="sort-icon">
                                                <i class="fa  fa-caret-left" [ngClass]="{active:offlineSortFlag == 1}" (click)="columnSort('offline',1)"></i>
                                                <i class="fa  fa-caret-right" [ngClass]="{active:offlineSortFlag == 2}" (click)="columnSort('offline',2)"></i>
                                            </span>
                                        </th>
                                        <th>重量时间</th>
                                        <th>重量[吨]</th>
                                        <th>经纬度</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let row of tableData">
                                        <td>{{row.companyName}}</td>
                                        <td>{{row.carNumber}}</td>
                                        <td>{{row.deviceId}}</td>
                                        <td>{{row.useTypeL2Str}}</td>
                                        <td>{{row.gpsUploadDate}}</td>
                                        <td>{{row.offLineDuration}}</td>
                                        <td>{{row.carUploadDate}}</td>
                                        <td>{{row.weight}}</td>
                                        <td>{{row.lngLat?[row.lngLat]:""}}</td>
                                        <td>
                                            <button type="button" (click)="analyseMange(row)">分析处理</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="table-fix clearfix">
                            <paginator [totalRecords]="tabletotalCount" [rows]="pageSize" [currentPage]="curPage - 1" (onPageChange)="tablePaginate($event)">
                            </paginator>
                            <button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </sa-widgets-grid>

</div>
<!-- 数据分析处理   弹窗-->
<div id="analyseModal">

    <div class="modal-dialog modal-lg" style="width: 1400px;margin: 0;">
        <div class="modal-content">
            <div class="modal-header" id="analyseModalheadDrag">
                <button type="button" class="close" (click)="cancelAnalyseModal()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">数据分析处理</h4>
            </div>
            <div class="modal-body" style="padding: 0;background-color: #ffffff;">
                <sa-problem-analyse #analyseComponent [isShowTitle]="false"></sa-problem-analyse>
            </div>
        </div>
    </div>


    <div style="position: absolute;right: 1px; bottom: 1px;width: 30px;height: 24px;">
        <button class="dragBtn btn btn-primary" id='dragArrow' title="拖拽改变弹窗宽度"> ↔ </button>
    </div>
</div>
<!-- 数据分析处理 END -->